<template>
    <div class="home-container">
        <div class="greeting-card">
            <h1 class="greeting-text">早上好！Admin</h1>
            <p class="greeting-subtext">今天是 {{ currentDate }}，祝您工作愉快！</p>
        </div>
        <div class="bottom">
            <SvgIcon name="welcome" width="600px" height="300px" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const currentDate = ref('')

onMounted(() => {
    const now = new Date()
    currentDate.value = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`
})
</script>

<style lang="scss" scoped>
.home-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
    padding: 24px;

    .greeting-card {
        padding: 32px;
        border-radius: 16px;
        box-shadow: 0 4px 12px rgb(0 0 0 / 0.05);
        transition:
            transform 0.3s ease,
            box-shadow 0.3s ease;

        &:hover {
            box-shadow: 0 6px 16px rgb(0 0 0 / 0.1);
            transform: translateY(-2px);
        }

        .greeting-text {
            margin: 0;
            font-size: 2rem;
            font-weight: 600;
            color: #2c3e50;
            color: transparent;
            background: linear-gradient(90deg, #3498db, #2ecc71);
            -webkit-background-clip: text;
            background-clip: text;
        }

        .greeting-subtext {
            margin: 8px 0 0;
            font-size: 1rem;
            color: #7f8c8d;
        }
    }

    .bottom {
        display: flex;
        justify-content: center;
    }
}
</style>
